@CHARSET "UTF-8";
/*
    Background, border, shadow, title link hover : #73C5E5
    Title, title link: #006699
    link in pannel : #990019
    menu-horizon: from #5aa610 to #88c134 #c5ea9d
    menu-horizon hover: #88c134 #c5ea9d
*/

html, body
{
    height          : 100%;
    margin          : 0;
    padding         : 0;
    border          : 0;
    outline         : 0;
    font-size       : 100%;
    vertical-align  : baseline;
    background      : transparent;
}

body {
    margin              : 0px;
    font-style          : normal;
    font-size           : 13px;
    font-family         : Tahoma, Arial, Verdana, sans-serif;
    color               : black;
    background-color    : #EFEFEF;
    background-image    : url('../../images/image_default/bg_noise.png');
}

a {
    text-decoration : none;
    color           : #A91E23;
}

a:HOVER {
    text-decoration : underline;
}

input[type="text"],
input[type="number"],
input[type="password"],
input[type="file"],
textarea,
select {
    margin             : 0px;
    padding            : 7px;
    text-shadow        : 0px 1px 0px #fff;
    border             : 1px solid #633393;

    outline            : none;
    -webkit-appearance : none;

    -webkit-border-radius : 0px;
    -moz-border-radius    : 0px;
    border-radius         : 0px;
    -webkit-box-shadow    : 1px 1px 1px #4A266D inset;
    -moz-box-shadow       : 1px 1px 1px #4A266D inset;
    box-shadow            : 1px 1px 1px #4A266D inset;
    
    /*Hỗ trợ IE 6,7,8 nhận diện được CSS3*/ 
    behavior: url(css/PIE.htc);
}

input[type="text"]:FOCUS,
input[type="number"]:FOCUS,
input[type="password"]:FOCUS,
input[type="file"]:FOCUS,
textarea:FOCUS,
select:FOCUS {
    -webkit-box-shadow : 1px 1px 1px #4A266D;
    -moz-box-shadow    : 1px 1px 1px #4A266D;
    box-shadow         : 1px 1px 1px #4A266D;
    
    behavior: url(css/PIE.htc);
}

select {
    background              : #fff url("") no-repeat right center;
    -webkit-background-size : 1400px 32px;
    padding-right           : 15px;
}

input[type="submit"],
input[type="button"] {
    margin                : 0px 0px 4px 0px;
    padding               : 12px;
    cursor                : pointer;
    color                 : #fff;
    text-transform        : uppercase;
    overflow              : visible; /* IE6/7 fix */
    border                : 0;

    background-color      : #E35354;
    background-image      : -moz-linear-gradient(#E35354, #E35354);
    background-image      : -webkit-gradient(linear, left top, left bottom, from(#E35354), to(#E35354));
    background-image      : -webkit-linear-gradient(#E35354, #E35354);
    background-image      : -o-linear-gradient(#E35354, #E35354);
    background-image      : -ms-linear-gradient(#E35354, #E35354);
    background-image      : linear-gradient(#E35354, #E35354);

    -moz-border-radius    : 2px;
    -webkit-border-radius : 2px;
    border-radius         : 2px;

    text-shadow           : 0 1px 0 rgba(227, 99, 103,0.8);/*rgba(0, 136, 204,0.3): màu sắc với độ trong suốt là 0.8*/

    /*-moz-box-shadow       : 0 4px 0 rgba(169, 30, 35, 1);
    -webkit-box-shadow    : 0 4px 0 rgba(169, 30, 35, 1);
    box-shadow            : 0 4px 0 rgba(169, 30, 35, 1);*/

    /*Hỗ trợ IE 6,7,8 nhận diện được CSS3*/ 
    behavior: url(css/PIE.htc);
}

input[type="submit"]:HOVER,
input[type="button"]:HOVER {
    background-color    : #E35354;
    background-image    : -moz-linear-gradient(#EA8080, #E35354);
    background-image    : -webkit-gradient(linear, left top, left bottom, from(#EA8080), to(#E35354));
    background-image    : -webkit-linear-gradient(#EA8080, #E35354);
    background-image    : -o-linear-gradient(#EA8080, #E35354);
    background-image    : -ms-linear-gradient(#EA8080, #E35354);
    background-image    : linear-gradient(#EA8080, #E35354);
}

input[type="submit"]:ACTIVE,
input[type="button"]:ACTIVE {
    background          : #A91E23;
    position            : relative;
    top                 : 2px;

    /*-moz-box-shadow     : 0px 0px 3px rgba(0, 0, 0, 0.7) inset;
    -webkit-box-shadow  : 0px 0px 3px rgba(0, 0, 0, 0.7) inset;
    box-shadow          : 0px 0px 3px rgba(0, 0, 0, 0.7) inset;*/
    
    /*Hỗ trợ IE 6,7,8 nhận diện được CSS3*/ 
    behavior: url(css/PIE.htc);
}

button.button_round {
    width          : 52px;
    height         : 52px;
    border         : 0px;
    overflow       : hidden;
    text-transform : uppercase;
    cursor         : pointer;
    font-size      : 32px;
    margin         : 8px;
    color          : white;
    outline        : none;

    background-color : #E35354;
    background-image : -moz-linear-gradient(#E35354, #E35354);
    background-image : -webkit-gradient(linear, left top, left bottom, from(#E35354), to(#E35354));
    background-image : -webkit-linear-gradient(#E35354, #E35354);
    background-image : -o-linear-gradient(#E35354, #E35354);
    background-image : -ms-linear-gradient(#E35354, #E35354);
    background-image : linear-gradient(#E35354, #E35354);
    filter           : progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#E35354', EndColorStr='#E35354');

    -webkit-border-radius : 50%;
    -moz-border-radius    : 50%;
    border-radius         : 50%;

    -webkit-box-shadow : 2px 2px 4px rgba(0,0,0,0.5);
    -moz-box-shadow    : 2px 2px 4px rgba(0,0,0,0.5);
    -ms-box-shadow     : 2px 2px 4px rgba(0,0,0,0.5);
    -o-box-shadow      : 2px 2px 4px rgba(0,0,0,0.5);
    box-shadow         : 2px 2px 4px rgba(0,0,0,0.5);
}

button.button_round:ACTIVE {
    background : #A91E23;
    color      : white;

    -moz-box-shadow    : 0px 0px 3px rgba(0, 0, 0, 0.7) inset;/*0px 0px 0px rgba(0, 0, 0, 0.7) inset: left top radian color type*/
    -webkit-box-shadow : 0px 0px 3px rgba(0, 0, 0, 0.7) inset;
    -ms-box-shadow     : 0px 0px 3px rgba(0, 0, 0, 0.7) inset;
    -o-box-shadow      : 0px 0px 3px rgba(0, 0, 0, 0.7) inset;
    box-shadow         : 0px 0px 3px rgba(0, 0, 0, 0.7) inset;
}

/**
 * Class Name: header ===================================================
 * Header of page 
 * 
 * ===========================================================================
 */
.header {
    float            : left;
    width            : 100%;
    margin           : 0px;
    padding          : 0px;
    color            : #fff;
    z-index          : 1;

    background-color : #0A050F;
}

.header a {
    color : #fff;
}

.header .menu_left {
    float   : left;
    padding : 8px 4px;
}

.header .menu_right{
    float   : right;
    padding : 8px 4px;
}

.header .company_name {
    font-size   : 40px;
    font-weight : bold;
}
/** End header =================================== */


/** navigation ============================
 * Navigation for website
 *
 * ==========================================*/
.nav_primary {
    z-index             : 1;
    float               : left;
    width               : 100%;
    *height             : 40px;
    font-size           : 17px;
    margin-bottom       : 24px;
    background-color    : #f5f5f5;
    background-image    : -moz-linear-gradient(#f5f5f5, #f1f1f1);
    background-image    : -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#f1f1f1));
    background-image    : -webkit-linear-gradient(#f5f5f5, #f1f1f1);
    background-image    : -o-linear-gradient(#f5f5f5, #f1f1f1);
    background-image    : -ms-linear-gradient(#f5f5f5, #f1f1f1);
    background-image    : linear-gradient(#f5f5f5, #f1f1f1);
    filter              : progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#f5f5f5', EndColorStr='#f1f1f1');

    -webkit-box-shadow  : 0px 1px 4px 0px #4a4a4a;
    -moz-box-shadow     : 0px 1px 4px 0px #4a4a4a;
    -ms-box-shadow      : 0px 1px 4px 0px #4a4a4a;
    -o-box-shadow       : 0px 1px 4px 0px #4a4a4a;
    box-shadow          : 0px 1px 4px 0px #4a4a4a;
}
/** End navigation ================================== */


/**
 * Class Name: header_full ===================================================
 * Make an header of box with full background color and 
 * the gab between it and border of box is 3
 * Ex: ([++++++++ Title ++++++++++])
 * ===========================================================================
 */
.header_full {
    margin       : 0px;
    padding      : 4px;/*Top Right Bottom Left*/
    font-size    : 16px;
    line-height  : 20px;
    font-weight  : bold;
    border-width : 8px;

    color        : white;
    text-shadow  : -1px 1px 0 #5b5b5b;
    background   : #633393;
    
    background-image     : url('../../images/image_default/bg_noise.png');
    -webkit-border-image : url('../../images/image_default/bg_stitch.png') 8 repeat; 
    -moz-border-image    : url('../../images/image_default/bg_stitch.png') 8 repeat;
    -o-border-image      : url('../../images/image_default/bg_stitch.png') 8 repeat;
    border-image         : url('../../images/image_default/bg_stitch.png') 8 repeat;
}
/** End header_full ================================== */


/**
 * box ==================================================================
 * This is class for title of box
 * Backgrond color is fix with width of user
 * =========================================================================
 */
.box,
.box_login {
    float              : left;
    display            : block;
    position           : relative;
    background-color   : white;
    width              : 99.16666666%;
    margin-left        : 0.41666666%;/*  4px ÷ 960px = 0.00416666 */
    margin-right       : 0.41666666%;/*  4px ÷ 960px = 0.00416666 */
    
    -webkit-box-shadow : 2px 4px 4px rgba(0,0,0,0.5);
    -moz-box-shadow    : 2px 4px 4px rgba(0,0,0,0.5);
    -ms-box-shadow     : 2px 4px 4px rgba(0,0,0,0.5);
    -o-box-shadow      : 2px 4px 4px rgba(0,0,0,0.5);
    box-shadow         : 2px 4px 4px rgba(0,0,0,0.5);
}

.box_content {
    padding : 4px 16px;
}

.box_content .button_navigation {
    text-align: left
}

.box_content .error_message {
    color       : red;
    font-weight : bold;
}
/** End box ================================== */


/**
 * box_paging ==============================================================
 * Make a list of number of page, gab between number is 4px
 * Ex: [<]... [1] [2] ...[>]
 * =========================================================================
 */    
.box_paging {
    margin-top    : 4px;
    float         : left;
    margin-bottom : 4px;
    width         : 100%;
    text-align    : center;
}

.box_paging a {
    color           : #A91E23;
    font-weight     : bold;
    text-decoration : none;
    border          : 1px solid #A91E23;
    padding         : 3px 7px;
}

.box_paging a:HOVER,
.box_paging .selected_page,
.box_paging .selected_page a {
    background-color : #A91E23;
    color            : white;
    font-weight      : bolder;
}
/** End box_paging ================================== */


/**
 * tab_menu ====================================================
 * Style of input, select in header of area
 * ===========================================================================
 */
.tab_menu {
    width        : 98.56666666%;
    position     : relative;
    font-weight  : bold;
    float        : left;
    margin       : 0px 8px;
    padding      : 0px 4px;
    border       : 0px;
}

.tab_menu .tab_control{
    margin-right     : 8px;
    position         : relative;
    bottom           : -4px;
    float            : left;
    display          : inline;
    cursor           : pointer;
    border           : 0px;
    background-color : #633393;
    color            : white;
}

.tab_menu .tab_control a {
    color   : white;
    padding : 12px;
    display : block;
}

.tab_menu .tab_control:HOVER,
.tab_menu .tab_selected {
    border             : none;
    bottom             : -1px;
    z-index            : 0;
    background-color   : white;
    color              : #633393;

    -webkit-box-shadow : 2px 2px 4px rgba(0,0,0,0.5);
    -moz-box-shadow    : 2px 2px 4px rgba(0,0,0,0.5);
    -ms-box-shadow     : 2px 2px 4px rgba(0,0,0,0.5);
    -o-box-shadow      : 2px 2px 4px rgba(0,0,0,0.5);
    box-shadow         : 2px 2px 4px rgba(0,0,0,0.5);
}

.tab_menu .tab_control:HOVER a,
.tab_menu .tab_selected a {
    color: #A91E23;
}

.tab_menu .tab_selected {
    cursor : default;
}


.button_navigation {
    position : relative;
    display  : block;
    margin   : 8px 0px;
}


/**
 * form_input ============================================================
 * Display a form to submit request of user
 *                _______________
 * lable:        |_______________|
 *                _______________
 * lable:        |_______________|
 *                 __________
 *               |__submit__|
 * ===========================================================================
 */
 .form_input {
    margin : 0px;
}
 
.form_input fieldset {
    margin  : 0px;
    padding : 0px;
    border  : none;
}

.form_input .form_input_row {
    float          : left;
    position       : relative;
    width          : 100%;
    padding-bottom : 3px;
    border-bottom  : 1px solid #CCC;
    margin-top     : 8px;
}

.form_input .row_bottom {
    float      : left;
    display    : table;
    margin     : 0px;
    margin-top : 8px;
    position   : relative;
    width      : 100%;
}

.form_input .form_input_row .label_title {
    font-weight    : bolder;
    vertical-align : middle;
    padding        : 4px 0px 0px 16px;
    float          : left;
    width          : 24%;
}

.form_input .form_input_row .image_preview {
    border        : 1px solid #633393;
    padding       : 3px 3px 3px 3px;
    margin-top    : 8px;
    margin-bottom : 16px;
    margin-right  : 4px;
    display       : inline-block;

    -webkit-box-shadow : 2px 2px 4px rgba(0,0,0,0.5);
    -moz-box-shadow    : 2px 2px 4px rgba(0,0,0,0.5);
    -ms-box-shadow     : 2px 2px 4px rgba(0,0,0,0.5);
    -o-box-shadow      : 2px 2px 4px rgba(0,0,0,0.5);
    box-shadow         : 2px 2px 4px rgba(0,0,0,0.5);
 
    /*Hỗ trợ IE 6,7,8 nhận diện được CSS3*/    
    behavior: url(css/PIE.htc);
}

.form_input .form_input_row .image_round {
    width    : 136px;
    height   : 136px;
    overflow : hidden;

    -webkit-border-radius : 50%;
    -moz-border-radius    : 50%;
    border-radius         : 50%;
}

.form_input .form_input_row .title_full {
    width  : initial;
    padding: 4px 16px;
}

.form_input .form_input_row .title_icon {
width              : 80px;
    height         : 80px;
    border         : 1px solid #633393;
    overflow       : hidden;
    text-transform : uppercase;
    font-size      : 52px;
    position       : relative;
    display        : inline-table;
    padding        : 3px 3px 3px 3px;
    margin-top     : 8px;
    margin-bottom  : 16px;
    text-align     : center;

    -webkit-border-radius : 50%;
    -moz-border-radius    : 50%;
    border-radius         : 50%;

    -webkit-box-shadow : 2px 2px 4px rgba(0,0,0,0.5);
    -moz-box-shadow    : 2px 2px 4px rgba(0,0,0,0.5);
    -ms-box-shadow     : 2px 2px 4px rgba(0,0,0,0.5);
    -o-box-shadow      : 2px 2px 4px rgba(0,0,0,0.5);
    box-shadow         : 2px 2px 4px rgba(0,0,0,0.5);
}

.form_input .form_input_row .title_icon .fa {
    height         : 48px;
    vertical-align : middle;
}

.form_input .form_input_row .lable_validation {
    width      : 100%;
    box-sizing : border-box;
    margin     : 0px;
    padding    : 4px 8px 4px 0px;
    float      : left;
    color      : red;
    display    : none;
}

.form_input .form_input_row .input_item input[type='text'],
.form_input .form_input_row .input_item input[type='number'],
.form_input .form_input_row .input_item input[type="password"],
.form_input .form_input_row .input_item input[type="file"],
.form_input .form_input_row .input_item textarea,
.form_input .form_input_row .input_item select {
    resize     : vertical;
    box-sizing : border-box;
    width      : 100%;
}

.form_input .form_input_row .input_item,
.form_input .form_input_row .input_items {
    margin         : 0px;
    padding        : 0px;
    float          : right;
    padding        : 0px 16px 0px 0px;
    vertical-align : top;
    width          : 68%;
}

.form_input .form_input_row .input_items input[type="file"] {
    width         : 98.55%;
    margin-bottom : 8px;
    margin-right  : 0px;
}

.form_input .form_input_row .input_items input,
.form_input .form_input_row .input_items label {
    vertical-align : top;
    float          : left;
    margin-right   : 8px;
}

.form_input .form_input_row .input_items select {
     width : initial;
     float : none;
}

.form_input .form_input_row .input_items input[type="checkbox"] {
    margin : 0px 4px 0px 0px;
    width  : 20px;
    height : 20px;
}

.form_input .form_input_row .input_items input[type="button"],
.form_input .form_input_row .input_items input[type="submit"],
.form_input .form_input_row .input_items button {
    width : 25%; 
}

.form_input .row_bottom input[type="submit"],
.form_input .row_bottom input[type="button"] {
    width            : 100%;
    margin           : 0px;
    padding          : 15px 16px 16px 16px;
    cursor           : pointer;
    color            : #A91E23;
    text-transform   : uppercase;
    font-weight      : bolder;
    overflow         : visible; /* IE6/7 fix */
    border-top       : 1px solid #CCC;
    outline          : none;

    background-color : #fff;
    background-image : -moz-linear-gradient(#fff, #fff);
    background-image : -webkit-gradient(linear, left top, left bottom, from(#fff), to(#fff));
    background-image : -webkit-linear-gradient(#fff, #fff);
    background-image : -o-linear-gradient(#fff, #fff);
    background-image : -ms-linear-gradient(#fff, #fff);
    background-image : linear-gradient(#fff, #fff);
    filter           : progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#fff', EndColorStr='#fff');

    text-shadow      : 0 1px 0 rgba(227, 99, 103,0.8);/*rgba(0, 136, 204,0.3): màu sắc với độ trong suốt là 0.8*/

    -moz-box-shadow    : 0 0 0 #fff;
    -webkit-box-shadow : 0 0 0 #fff;
    box-shadow         : 0 0 0 #fff;

    -moz-border-radius    : 0px;
    -webkit-border-radius : 0px;
    border-radius         : 0px;

    /*Hỗ trợ IE 6,7,8 nhận diện được CSS3*/ 
    behavior: url(css/PIE.htc);
}

.form_input .row_bottom input[type="submit"]:ACTIVE,
.form_input .row_bottom input[type="button"]:ACTIVE {
    top                : 0px;
    -moz-box-shadow    : 2px 2px 4px rgba(0, 0, 0, 0.4) inset;/*0px 0px 0px rgba(0, 0, 0, 0.7) inset: left top radian color type*/
    -webkit-box-shadow : 2px 2px 4px rgba(0, 0, 0, 0.4) inset;
    box-shadow         : 2px 2px 4px rgba(0, 0, 0, 0.4) inset;

    /*Hỗ trợ IE 6,7,8 nhận diện được CSS3*/ 
    behavior: url(css/PIE.htc);
}

.form_input .row_bottom input[type="submit"].width_50,
.form_input .row_bottom input[type="button"].width_50 {
    width : 50%;
}

.form_input .row_bottom input[type="submit"].width_50:first-of-type,
.form_input .row_bottom input[type="button"].width_50:first-of-type {
    border-right : 1px solid #CCC;
    padding-right: 15px;
}
/** End form_input ================================== */


/**
 * tb_general ======================================================
 * Style table for website, this style is general, it's for all page
 * =================================================================
 */
div.tb_general {
    padding : 0px;
    margin  : 4px 0px;
}
table.tb_general {
    padding         : 0px;
    border-collapse : collapse;
    width           : 100%;
}

table.tb_general tr {
    margin         : 0px;
    padding        : 0px;
    vertical-align : top;
}

table.tb_general tr:HOVER {
    background-color : #EFEFEF;
}

table.tb_general th {
    margin         : 0px;
    padding        : 4px 4px 3px 4px;
    text-align     : left;
    vertical-align : middle;
    
    border-bottom    : 1px solid #CECECE;
    background-color : #EFEFEF;
}

table.tb_general td {
    margin         : 0px;
    padding        : 4px 4px 3px 4px;
    vertical-align : top;
    border-bottom  : 1px solid #CECECE;
}

table.tb_general span.title {
    float        : left;
    margin-right : 12px;
}

table.tb_general td.td_button {
    border-bottom : none;
    padding       : 4px 4px 4px 4px;
    text-align    : center;
}

table.tb_general td input[type="text"] {
    width : 99%;
}

table.tb_general td input[type="checkbox"] {
    margin : 0px;
    width  : 20px;
    height : 20px;
}

table.tb_general td.td_last,
table.tb_general th.td_last {
    border-bottom : none;
    padding       : 4px 4px 4px 4px;
}
/** End tb_general ================================== */


/**
 * style for screen resolution ===================================================
 * default styles here for older browsers. 
 * I tend to go for a 600px - 960px width max but using percentages
 * ===========================================================================
 */
/* styles for mobile browsers smaller than 480px; */
@media all and (max-width:480px){
    .form_input .form_input_row {
        margin: inherit;
    }

    .form_input .form_input_row .input_item,
    .form_input .form_input_row .input_items {
        width         : 99.16666666%;
        padding-left  : 0.41666666%;
        padding-right : 0.41666666%;
        float         : none;
    }

    .form_input .form_input_row .label_title {
        position      : relative;
        width         : inherit;
        margin-bottom : 4px;
        top           : inherit;
        display       : block;
    }

    .form_input .form_input_row select {
        width : 96%;
        float : none;
    }

    .form_input .form_input_row .lable_validation {
        width       : inherit;
        float       : none;
        margin-left : 8px;
    }

    .form_input .form_input_row input[type="submit"],
    .form_input .form_input_row input[type="button"] {
        width         : 99%;
        margin-bottom : 16px;
    }
}

@media all and (min-width:800px){
    .box_login {
        float      : inherit;
        width      : 472px;
        margin     : auto;
        margin-top : 12px;
    }
}

@media only screen and (max-width:960px){
    /* styles for browsers larger than 960px; */
    .box_content .button_navigation {
        text-align: right
    }
}

/* styles for mobile browsers landscape and ipad; */
@media all and (min-width: 481px) and (max-width:900px){
}
@media only screen and (min-width:1440px){
    /* styles for browsers larger than 1440px; */
}
@media only screen and (min-width:2000px){
    /* for sumo sized (mac) screens */
}
@media only screen and (max-device-width:480px){
   /* styles for mobile browsers smaller than 480px; (iPhone) */
}
@media only screen and (device-width:768px){
   /* default iPad screens */
}
/* different techniques for iPad screening */
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
  /* For portrait layouts only */
}
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
  /* For landscape layouts only */
}
/** End style for screen resolution ================================== */


/**
 * css with important property ==============================================
 * 
 * =========================================================================
 */
 
 /* fix wrapping for chrome 39*/
.horizon_navigation li,
div.tab_control {
    white-space: nowrap;
}
 
.clear {
    clear: both;
}

.margin_auto {
    margin-left : auto;
    margin-right: auto;
}

.display_inline_block {
    display: inline-block!important;
}

.text_left {
    text-align: left!important;
}

.text_right {
    text-align: right!important;
}

.text_center {
    text-align: center!important;
}

.border_bottom_none {
    border-bottom: none!important;
}

.display_none {
    display: none;
}
/** End css with important property ================================== */


/**
 * icon_button ==============================================================
 * These icon for add, delete of user
 * =========================================================================
 */    
.icon_button {
    display             : block!important;
    height              : 16px!important;
    line-height         : 16px!important;
    padding-left        : 20px!important;
    background          : url(../../images/image_default/buttons_blue.png) no-repeat left;
    background-position : 0 0;
    cursor              : pointer;
    text-align          : left;
    float               : left;

    behavior            : url(css/iepngfix.htc);
}
        
.icon_edit{
    background-position: 0 -1px;
}

.icon_phone{
    background-position: -20px 0px;    
}

.icon_delete{
    background-position: -48px 0px;    
}

.icon_shopping_cart {
    display             : block!important;
    height              : 16px!important;
    line-height         : 16px!important;
    padding-left        : 20px!important;
    background          : url(../../images/image_default/shopping_cart.png) no-repeat left;
    background-position : 0 0;
    cursor              : pointer;
    text-align          : left;
    float               : left;
}

.button_icon{
    display     : block;
    float       : right!important;
    margin-left : 4px;
}

/**
 * icon_button ==============================================================
 * These icon for social network
 * =========================================================================
 */    
.icon_social_network {
    display             : block!important;
    height              : 16px!important;
    line-height         : 16px!important;
    padding-left        : 20px!important;
    background          : url(../../images/image_default/icon_social_network.png) no-repeat left;
    background-position : 0 0;
    cursor              : pointer;
    text-align          : left;
    float               : left;
}

.icon_zingme {
    background-position: 0 -5776px;
}

.icon_govn {
    background-position: 0 -2128px;
}

.icon_facebook {
    background-position: 0 -1552px;
}

.icon_twitter {
    background-position: 0 -5088px;
}
    
    /**
     * icon_button ==============================================================
     * These icon for pannel of table
     * =========================================================================
     */
    .icon_control {
        display                : block!important;
        height                : 20px!important;
        line-height            : 20px!important;
        padding-left        : 20px!important;
        background            : url(../../images/image_default/control_panel_black.png) no-repeat left;
        background-position    : 0 0;
        cursor                : pointer;
        text-align            : left;
        float                : left;
        
        behavior            : url(css/iepngfix.htc);
    }
    
    .icon_control_delete {
        background-position: -63px -42px;
    }
    
    .icon_control_panel {
        background-position: 0 -21px;
    }
    
    .icon_control_apply {
        background-position: -63px -21px;
    }
    
    .icon_control_phone {
        background-position: -63px 0px;
    }
    
/*================================== End Button Image ==========================*/

    
    /**
     * user_navigation =========================================================
     * This is class for control pannel of user
     * Operations of user at web site will be display at this area
     * =========================================================================
     */
    ul.user_navigation {
        margin            : 0px;
        padding-left    : 0px;
        list-style-type    : none;
        float            : right;
        z-index            : 2;
    }
    
    ul.user_navigation a {
        margin            : 0px 4px 0px 4px;
        text-decoration    : none;
        font-weight        : bold;
    }
    
    
    ul.user_navigation li,
    ul.user_navigation li.li_pannel{
        margin        : 0px;
        height        : 16px;
        padding        : 4px 4px;
        float        : left;
        position    : relative;
    }
    
    ul.user_navigation li.li_input {
        height        : 24px;
        padding        : 0px;
        padding-left: 4px;
    }
    
    ul.user_navigation li.li_pannel {
        margin-right: 4px;
        width        : auto;
        text-align    : left;
    }
    
    ul.user_navigation ul{
        margin            : 0px;
        padding            : 0px 0px;
        border-top        : none;
        position        : absolute;
        width            : auto;
        top                : 24px;
        left            : -1px;
        visibility        : hidden;
        list-style-type    : none;
        z-index            : 101;
        
        background-color: white;
        border            : solid 1px #B7C5CE;
        border-top        : none;
    }
    
    ul.user_navigation li li {
        width    : 150px;
        font    : 400 12px/16px tahoma;
    }
    
    ul.user_navigation li li:HOVER {
        background-color: #F2F2F3;
    }
    
    ul.user_navigation li.li_pannel:HOVER {
        background-color: white;
        border            : solid 1px #B7C5CE;
        border-bottom    : none;
        border-top        : none;
    }
            
    ul.user_navigation li.li_pannel:HOVER ul {
        display            : block;
        visibility        : visible;
    }

        

    /**
     * box_inside ==============================================================
     * Add an box with border in box area (box is level 2)
     * Ex: "<div class='box'>
     *            <div class='box_inside'>"
     * =========================================================================
     */
    .box_inside {
        margin            : 4px 3px 4px 3px;/*Top Right Bottom Left*/
        border            : 1px solid #0C9FD4;
        float            : left;
        
        _margin-left    : 2px;
        _margin-right    : 0px;
        *padding-top    : 3px;
    }
    
    
    /**
     * box_end ==============================================================
     * Add some text (link, description) into the right of bottom of box
     * Ex: "search more>>"
     * =========================================================================
     */
    .box_end {
        float            : right;
        font-weight        : bold;
        margin-bottom    : 3px;
        margin-right    : 3px;
    }
    
    
    
    
    /**
     * dialog_message ====================================================
     * Popup box for comand, submit,...
     * ===========================================================================
     */
     .dialog_message {
         margin    : 0px;
         padding    : 0px;
     }
     
     .dialog_message p.center {
         margin        : 0px;
         padding        : 0px;
         
         text-align    : center;
     }
    

   
    
    
    
    
    
    /**
     * form_header ====================================================
     * Style of input, select in header of area
     * ===========================================================================
     */
    .form_header {
        margin            : 0px;
        margin-bottom    : 4px;
        *margin-top      : -4px;
        padding            : 4px;
        float            : none;
        text-align        : left;
        background      : #f8f8f8;
        background      : -webkit-linear-gradient(top, #F7F7F7, #ECECEC);
        background      : -moz-linear-gradient(top, #F7F7F7, #ECECEC);
        background      : linear-gradient(top, #F7F7F7, #ECECEC);
    }
    
    .form_header form {
       *margin: 0px;
       *padding: opx;
    }
    
    .form_header label {
        color: white;    
    }
    
    .form_header input,
    .form_header select {
        margin    : 0px;
        border    : 1px solid;
        padding    : 3px 3px;
        height    : 16px;
    }
    
    .form_header select {
        border-top    : 0px;
        height        : 24px;
    }
    
    .form_header .button {
        height    : 24px;
        border    : none;
        margin    : 0px 0px 4px 0px;
        padding   : 4px 8px 4px 8px;
    }


    
    
    /**
     * item_detail =============================================
     * Show short infomation of artist
     * _________
     * |        | name        : name
     * |image    | company    : company
     * |________| long description at
     * here, now you can imagine (^_^)
     * ==========================================================================
     */
    .item_detail {
        margin            : 4px 3px 4px 3px;/*Top Right Bottom Left*/
        _margin-left        : 0px;
        padding            : 0px 4px 0px 4px; /*Top Right Bottom Left*/
        text-align        : justify;
        float            : left;
    }
    
    .item_detail .link_navigation {
        margin            : 4px;
    }
    
    .item_detail .image_item {
        width            : 160px;
        height            : 160px;
        margin-right    : 8px;
        vertical-align    : top;
        float            : left;
        padding            : 3px;
        
        border            : 1px solid #0C9FD4; 
    }
    
    .item_detail .tb_info td {
        border            : 1px solid white;
    }
    
    .item_detail .tb_info .title_info {
        font-size        : 14px;
        font-weight        : bold;
        color            : #0088CC;
    }
    
    .item_detail .combobox {
        font-size    : 12px;
        line-height    : 16px;
        margin        : 0px;
        padding        : 3px;
        height        : 24px;
        width        : 140px;
        
        border        : 1px solid #0C9FD4;
    }
    
    .item_detail .textbox {
        font-size    : 12px;
        line-height    : 16px;
        margin        : 0px;
        padding        : 3px;
        width        : 52px;
        
        border        : 1px solid #0C9FD4;
    }
    
    .item_detail .tab_menu {
        margin-left        : 0px;
        margin-right    : 0px;
    }    
    
    /*
     * music_list ====================================================
     * Show list of music like below 
     *  ________
     * |image    | Tilte            description        [button][button]
     * |optional| Artist        some things        
     * |________| Some things
     * ===========================================================================
     */
    .music_list {
         margin    : 0px 3px 0px 3px;
         *margin    : 0px 3px 0px 3px;
         float    : left;
         
         _margin    : 0px;
    }
     
    .music_list .item {
        padding            : 4px 4px 3px 4px;
        position        : relative;
        border-bottom    : 1px solid #CCC;
        float            : left;
        width            : 100%;
    }
    
    .music_list .item .image_thumbail,
    .music_list .item .image_album {
        float            : left;
        margin-right    : 8px;
        width            : 120px;
        height            : 88px;
        
        border            : 1px solid #CCCCCC;
        padding            : 3px 3px 3px 3px;
        
        /* Bo góc đường viền CSS3*/
        -webkit-border-radius    : 4px 4px 4px 4px; /* Safari prototype */
        -moz-border-radius        : 4px 4px 4px 4px; /* Gecko browsers */
        border-radius            : 4px 4px 4px 4px; /* dùng cho các trình duyệt khác - Topleft TopRight BottomRight BottomLeft*/
        
        /*Hỗ trợ IE 6,7,8 nhận diện được CSS3*/    
        behavior: url(css/PIE.htc);
    }
    
    .music_list .item .image_album {
        height            : 120px;
    }
    
    .music_list .item a {
        color            : #313131;
        text-decoration    : none;
    }
    
    .music_list .item a:HOVER {
        color            : #0088CC;
        text-decoration    : none;
    }
    
    .music_list .item .info {
        float            : left;
    }
    
    .music_list .item .desc {
        float            : right;
        margin-right    : 80px;
        
        _margin-right    : 44px;
    }
    
    .music_list .item .title {
        font-size        : 12px;
        line-height        : 17px;
        color            : #313131;
        font-weight        : bold;
        margin            : 0px 0px 0px 0px; 
    }
    
    .music_list .item p {
        margin        : 0px 0px 0px 0px;
    }
    
    .music_list .item .column_center {
        float        : left;
    }
    
    .music_list .item .button{
        position    : absolute!important;
        right        : 4px;
        top            : 4px;
    }
    
    /* media_player ==============================================================
     * Display music player to play media file 
     * ===========================================================================
     */
    .media_player {
        margin            : 7px 7px 0px 7px;
        float            : left;
    }
    
    /*
     * media_list ================================================================
     * Display music list of album, music, playlist to play
     * | Title        | Artist        |     button|
     * | Title        | Artist        |     button|
     * =========================================================================== 
     */
    .media_list {
        float            : left;
        margin            : 4px 7px;
        margin-top        : 0px;
        overflow-y        : auto;
        overflow-x        : hidden;
    }
    
    .media_list ul.list_item {
        float            : left;
        margin            : 0px;
        padding            : 0px;
        
        overflow-y        : scroll;
        overflow-x        : hidden;
        max-height        : 180px;
    }
    
    .media_list ul.list_item li {
        text-decoration    : none;
        list-style-type    : none;
        list-style-image: none;
        
        float            : left;
        margin            : 0px 0px 0px 0px;
        background-color: #F6F6F6;
        
    }
    
    .media_list ul.list_item li:HOVER {
        background-color: transparent;
        color            : #08C;
    }
    
    .media_list ul.list_item .item_title,
    .media_list ul.list_item .item_artist,
    .media_list ul.list_item .button_nav {
        float            : left;
        padding            : 7px 3px 7px 0px;
        
        border-right    : 1px solid #D7D7D7;
        border-bottom    : 1px solid #D7D7D7;
    }
    
    .media_list ul.list_item .item_title {
        text-align        : left;
        padding-left    : 8px;
    }
    
    .media_list ul.list_item .item_artist {
        padding-left    : 8px;
    }
    
    .media_list ul.list_item .button_nav {
        float            : right;
        text-align        : right;
        height            : 17px;
    }

    

    /*
     * galleries_item ============================================================
     * Display 4 Item (album, products) in row by horizon, vertical
     * Horizon
     *  ________                 _______                
     * |image    | Infomation    |image    | Infomation
     * |        | Infomation    |        | Infomation        
     * |________|                |_______|
     * Vertical
     *  ________     _______                
     * |image    |     |image    |
     * |        |     |        |
     * |________|    |_______|
     * Infomation    Infomation
     * Infomation    Infomation
     * ===========================================================================
     */
    .galleries_item {
        float    : left;
        width    : 100%;
        
        _margin    : 0px;
        
        /* Bo góc đường viền CSS3*/
        -webkit-border-radius    : 4px 4px 4px 4px; /* Safari prototype */
        -moz-border-radius        : 4px 4px 4px 4px; /* Gecko browsers */
        border-radius            : 4px 4px 4px 4px; /* dùng cho các trình duyệt khác - Topleft TopRight BottomRight BottomLeft*/
        
        /*Hỗ trợ IE 6,7,8 nhận diện được CSS3*/    
        behavior: url(css/PIE.htc);
    }
    
    .galleries_item .row_item {
        float    : left;
        margin    : 4px 0px 4px 0px;
        width    : 100%;
        
    }
    
    .galleries_item .item_title {
        width        : 100%;
        display        : block;
        font-weight    : bold;
        
        white-space    : -moz-pre-wrap !important;  /* Mozilla, since 1999 */
        white-space    : -pre-wrap;/* Opera 4-6 */
        white-space    : -o-pre-wrap;/* Opera 7 */
        white-space    : pre-wrap;/* css-3 */
        word-wrap    : break-word;/* Internet Explorer 5.5+ */
        word-break    : break-word;
    }
    
    .galleries_item .item_sub_title {
        color: #FF6314;
    }
    
    .galleries_item .butt_icon {
        margin        : 0px;
        padding        : 0px;
        display        : block;
        margin-top    : 4px;
    }
    
    .galleries_item .item_vertical,
    .galleries_item .item_horizon {
        float    : left;
        margin    : 4px 4px 4px 4px;
        padding    : 0px;
        width    : 172px;
        
        _margin    : 0px 3px;
    }
    
    .galleries_item .item_vertical .item_content,
    .galleries_item .item_horizon .item_content {
        padding : 4px;
        float   : left;
        width   : 95%; 
    }
    
    .galleries_item .icon_cart {
        position        : absolute;
        top                : 0px;
        right            : 4px;
        display            : block!important;
        width            : 0px!important;
        height            : 40px!important;
        padding-left    : 44px!important;
        cursor            : pointer;
        background        : url('../../images/image_default/add_cart_blue.png') no-repeat left;
        
        behavior        : url(css/iepngfix.htc);
    }
    
    .galleries_item .item_vertical:HOVER .item_content,
    .galleries_item .item_horizon:HOVER .item_content {
        padding            : 3px;
        border            : 1px solid #0C9FD4;
        background-color: #EAFFE0;
        width            : 95%; 
    }
    
    .galleries_item .item_vertical img,
    .galleries_item .item_horizon img {
        margin-bottom    : 4px;
        border            : 1px solid #0C9FD4;
        padding            : 3px 3px 3px 3px;
        
        /* Bo góc đường viền CSS3*/
        -webkit-border-radius    : 4px 4px 4px 4px; /* Safari prototype */
        -moz-border-radius        : 4px 4px 4px 4px; /* Gecko browsers */
        border-radius            : 4px 4px 4px 4px; /* dùng cho các trình duyệt khác - Topleft TopRight BottomRight BottomLeft*/
        
        /*Đổ bóng cho khung viền*/
        -moz-box-shadow        : 2px 2px 1px #ADDEFF;
        -webkit-box-shadow    : 2px 2px 1px #ADDEFF;
        box-shadow            : 2px 2px 1px #ADDEFF;
        
        /*Hỗ trợ IE 6,7,8 nhận diện được CSS3*/    
        behavior: url(css/PIE.htc);
    }
    
    .galleries_item .item_vertical img {
        width            : 93%;
        height            : inherit;
        vertical-align    : bottom;
    }
    
    .galleries_item .item_horizon img {
        margin-right    : 4px;
        margin-bottom    : 0px;
        float            : left;
    }
    
    .galleries_item .item_horizon span {
        display            : block;
    }
    
    
    /*
     * horizon line ============================================================
     * Display a line under object, paragraph
     *     ___________________
     * 
     * ===========================================================================
     */
    .underline {
        margin    : 4px 0px 8px 0px;
        border    : 2px inset;
        width    : 92%; 
    }
    



/*=================================== Footer Area ===============================*/

    .footer {
        margin-top        : 8px;
    }
    
    .logo_footer{
        width            : 100%;
        display            : block;
        float            : left;
        margin            : 0px;
        padding            : 0px 0px 4px 0px;
        border-bottom    : 1px solid #CCCCCC;
    }
    
    .text_footer {
        width            : 100%;
        display            : block;
        float            : left;
        margin            : 0px;
        padding            : 4px 0px 0px 0px;
    }
    
    .text_footer a,
    .logo_footer a {
        text-decoration    : none;
        font-weight        : bold;
        
        color            : #006699;
    }
    
    .footer .align_left {
        padding : 8px;
        width    : 50%;
        float    : left;
        border    : none;
    }
    
    .footer .align_right {
        padding : 8px;
        float    : right;
        border    : none;
}
/*============================== End Footer Area ================================*/


/*================================================ Small Attitude ========================================================*/
    .border_radius_all{
        /* Bo hết góc đường viền CSS3 - - Topleft TopRight BottomRight BottomLeft*/
        -webkit-border-radius    : 4px 4px 4px 4px; /* Safari prototype */
        -moz-border-radius        : 4px 4px 4px 4px; /* Gecko browsers */
        border-radius            : 4px 4px 4px 4px; /* dùng cho các trình duyệt khác*/
        
        
        /*Hỗ trợ IE 6,7,8 nhận diện được CSS3*/    
        behavior: url(css/PIE.htc);
    }
    
    .border_radius_top{
        -webkit-border-radius    : 4px 4px 0px 0px; /* Safari prototype */
        -moz-border-radius        : 4px 4px 0px 0px; /* Gecko browsers */
        border-radius            : 4px 4px 0px 0px; /* dùng cho các trình duyệt khác*/
        
        /*Hỗ trợ IE 6,7,8 nhận diện được CSS3*/    
        behavior: url(css/PIE.htc);
    }
    
    .border_radius_bottom{
        -webkit-border-radius    : 0px 0px 4px 4px; /* Safari prototype */
        -moz-border-radius        : 0px 0px 4px 4px; /* Gecko browsers */
        border-radius            : 0px 0px 4px 4px; /* dùng cho các trình duyệt khác*/
        
        /*Hỗ trợ IE 6,7,8 nhận diện được CSS3*/    
        behavior: url(css/PIE.htc);
    }
    
    .shadow_box{
        /*Đổ bóng cho khung viền*/
        /*
            x: Bóng đổ theo chiều ngang, nghĩa là phần bóng đổ sẽ lệch về phía phải của đối tượng.
            y: Bóng đổ theo chiều dọc, nghĩa là phần bóng đổ sẽ lệch về phía trên của đối tượng.
            z: Độ rộng hay còn gọi là độ dày của bóng đổ.
            color: Màu sắc của phần bóng đổ.
        */
        -moz-box-shadow        : 0 0 4px 2px #CACACA;
        -webkit-box-shadow    : 0 0 4px 2px #CACACA;
        box-shadow            : 0 0 4px 2px #CACACA;
        
        /*Hỗ trợ IE 6,7,8 nhận diện được CSS3*/
        behavior: url(css/PIE.htc);
    }
    
    .border_outset {
        border-style: outset;
    }
    
    .padding_bottom_none {
        padding-bottom    : 0px;
    }
    
    .margin_border_all {
        margin: 3px 3px 4px 3px;
    }
    
    .margin_top_4 {
        margin-top        : 4px;
    }
    
    .margin_top_none {
        margin-top        : 0px;
    }
    
    .margin_bottom_24 {
        margin-bottom    : 24px;
    }
    
    .margin_bottom_4 {
        margin-bottom    : 4px;
    }
    
    .margin_bottom_none {
        margin-bottom    : 0px;
    }
    
    .border_bottom_none {
        border-bottom    : none;
    }
    
    .border_bottom_1 {
        border-bottom    : solid 1px #F7C808;
    }
    
    .background_color_transparent {
        background-color: transparent;
    }

    .all_width {
        width: 100%;
    }
    
    .position_relative {
        position: relative;
    }
    
    .z_index_-1 {
        z-index: -1;
    }
    
    .text_center {
        text-align: center;
    }
/*=============================================== End Small Attitude =====================================================*/
